<template>
  <el-dialog :visible.sync="visible" width="52%" :before-close="onClose">
    <div slot="title" style="font-size: 14px;font-weight: 500;">
      选择渠道活码
    </div>
    <div class="select-qrcodes-container">
      <div class="search-rows">
        <el-input class="search-input" size="small" placeholder="搜渠道活码" suffix-icon="el-icon-search" style="width: 240px;" />
        <a style="color: #2f54eb;font-size: 14px;margin-left: 8px;" @click="onNavigationTo('/hook/qrcodes')">新建渠道活码>></a>
      </div>
      <div class="empty-content">
        <img class="empty-cover" src="@/assets/images/market_empty.png" />
        <p>暂无数据</p>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onClose">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      check: 0,
      check1: 0,
    }
  },
  props: ['visible'],
  methods: {
    onNavigationTo(path) {
      this.$router.push(path)
    },
    onClose() {
      this.$emit('handCloseDialog');
    }
  },
}
</script>
<style lang="scss" scoped>
.select-qrcodes-container {
  .search-rows {
    display: flex;
    align-items: center;
  }

  .empty-content {
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .empty-cover {
      width: 48px;
      height: 48px;
    }

    p {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, .25);
    }
  }
}
</style>